<template>
	<scroll-view ref='scrollview' :scroll-into-view="isComment" scroll-with-animation scroll-y class="lt-detail-wrapper">
		<custom-header-bar backStatus='1'></custom-header-bar>
		<div class="info-wrapper">
			<div class="info">
				<div>
					<text class="name">{{post.itName}}</text>
					<text class="address"> ({{post.itAddress}})</text>
				</div>
				<div class="topic-wrapper" v-if="post.itTopic">
					<image class="image" src="/static/icon-topic.png" mode=""></image>
					<text class="name">{{post.itTopic}}</text>
				</div>
			</div>
			<div class="line"></div>
			<div class="content">{{post.itContent}}</div>
			<div class="image-list" v-if="post.itImg">
				<div class="image-item" v-for="(image,imgindex) in post.itImg">
					<image @click.stop='previewImage(image,post.itImg)' class="image" :src="image" mode=""></image>
				</div>
			</div>
			<div class="tail-wrapper">
				<div class="time">{{post.createTimeStr|dateFormat}}</div>
			</div>
			<div class="line"></div>
			<div class="zan-wrapper">
				<div class="zan">
					<image class="image" v-if="post.zanState===1" src="/static/icon-zan-active.png" mode=""></image>
					<image class="image" v-else @click.stop="zanFn(post)" src="/static/icon-zan.png" mode="">
				</div>
				<div class="text">为TA点赞</div>
			</div>
		</div>
		<div class="comment-wrapper" id='comment'>
			<div class="title" @click='commentChoose(0)'>评论({{commentList.length}})</div>
			<div class="loading" v-if="commentList===''">加载中...</div>
			<div class="empty" v-else-if="commentList.length===0">
				<image src="/static/empty-comment.png" mode=""></image>
			</div>
			<div class="list-wrapper" v-else>
				<div class="item-wrapper" v-for="(item,index) in commentList" :key="item.id">
					<div class="content" @click='commentChoose(item,index)'>{{item.itContent}}</div>
					<div class="tail-wrapper">
						<div class="time">{{item.createTimeStr|dateFormat}}</div>
						<div class="empty"></div>
						<div class="zan active" @click="zanFn(item,'comment')">
							<image class="image" v-if="item.zanState===1" src="/static/icon-zan-active.png" mode="">
							</image>
							<image class="image" v-else src="/static/icon-zan.png" mode="">
								<text class="text"></text>
								<text class="text">{{item.supportNum}}</text>
						</div>
						<div class="pinglun active">
							<image class="image" src="/static/icon-pl.png" mode=""></image>
							<text class="text"></text>
							<text class="text">{{item.itEvaluateList.length}}</text>
						</div>
					</div>
					<div class="sub-comment">
						<div class="inner">
							<div class="item-wrapper" v-for="(sub,index) in item.itEvaluateList" :key="sub.id">
								<div class="content">{{sub.itContent}}</div>
								<div class="tail-wrapper">
									<div class="time">{{sub.createTimeStr|dateFormat}}</div>
									<div class="empty"></div>
									<div class="zan active" @click="zanFn(sub,'comment')">
										<image class="image" v-if="sub.zanState===1" src="/static/icon-zan-active.png"
											mode=""></image>
										<image class="image" v-else src="/static/icon-zan.png" mode="">
											<text class="text"></text>
											<text class="text">{{sub.supportNum}}</text>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="tail-fixed">
			<input class="input" v-model="commentText" :placeholder="commentPlaceholder" />
			<button @click="commentFn" class="button">发送</button>
		</div>
	</scroll-view>
</template>
<script>
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import {
		PostDetail,
		PostComment,
		PostCommentZan
	} from "@/utils/api.js"
	import {
		PICTURE_URL
	} from "@/utils/config.js"
	export default {
		data() {
			return {
				post: '',
				isComment: '', // 是否直接滚动到评论处
				commentText: null,
				commentList: '',
				commentPlaceholder: '请输入评论内容'
			}
		},
		onLoad(options) {
			this.options = options
			this.initDetail(this.options.id)
			this.initComment()
			if (options.to === 'comment') {
				this.isComment = 'comment'
			}

		},
		methods: {
			initDetail(id) {
				let zanlist = uni.getStorageSync('ZANLIST')
				if (zanlist) {
					zanlist = zanlist.split(',')
				} else {
					zanlist = []
				}
				PostDetail(id).then((res) => {
					let post = res.data.data
					if (post.itImg) {
						let imgArray = post.itImg.split(',')
						post.itImg = imgArray.map((image) => {
							return PICTURE_URL + image
						})
					}
					if (zanlist.indexOf('zan' + id) != -1) {
						post.zanState = 1
					} else {
						post.zanState = 0
					}
					this.post = post
				})
			},
			initComment() {
				let zanlist = uni.getStorageSync('ZANLIST')
				if (zanlist) {
					zanlist = zanlist.split(',')
				} else {
					zanlist = []
				}
				PostComment(this.options.id).then((res) => {
					let commentList = res.data.rows
					for (let i = 0; i < commentList.length; i++) {
						if (zanlist.indexOf('comment' + commentList[i].id) != -1) {
							commentList[i].zanState = 1
						} else {
							commentList[i].zanState = 0
						}
						for (let j = 0; j < commentList[i].itEvaluateList.length; j++) {
							if (zanlist.indexOf('comment' + commentList[i].itEvaluateList[j].id) != -1) {
								commentList[i].itEvaluateList[j].zanState = 1
							} else {
								commentList[i].itEvaluateList[j].zanState = 0
							}
						}
					}
					this.commentList = commentList
				})
			},
			// 点赞功能
			zanFn(zanObject, type = 'zan') {
				if (zanObject.zanState === 1) return
				let params = {
					companyId: this.post.itId,
					state: '0'
				}
				if (type == 'comment') {
					zanObject.itId = zanObject.id
					params.repliedBy = zanObject.id
				}
				PostCommentZan(params).then((res) => {
					// 存进缓存里
					let zanlist = uni.getStorageSync('ZANLIST')
					if (zanlist) {
						zanlist = zanlist.split(',')
						zanlist.push(type + zanObject.itId)
					} else {
						zanlist = [type + zanObject.itId]
					}
					uni.setStorageSync('ZANLIST', zanlist.join(','))
					// 修改列表
					zanObject.zanState = 1
					zanObject.supportNum++
					uni.showToast({
						title: '点赞成功',
						icon: 'none',
						duration: 2000,
						success() {}
					})
				})
			},
			// 对评论进行评论
			commentChoose(comment, index) {
				if (comment) {
					this.currentComment = comment
					this.commentPlaceholder = '@：' + comment.itContent
				} else {
					this.currentComment = ''
					this.commentPlaceholder = '请输入评论内容'
				}
			},
			// 评价功能
			commentFn() {
				console.log(this.$refs.scrollview)
				if (!this.commentText) return
				let params = {
					companyId: this.post.itId,
					state: '1',
					itContent: this.commentText,
				}
				if (this.currentComment) {
					params.repliedBy = this.currentComment.id
				}
				PostCommentZan(params).then((res) => {
					// 存进缓存里
					let zanlist = uni.getStorageSync('ZANLIST')
					if (zanlist) {
						zanlist = zanlist.split(',')
						zanlist.push('zan' + this.post.itId)
					} else {
						zanlist = ['zan' + this.post.itId]
					}
					uni.setStorageSync('ZANLIST', zanlist.join(','))
					// 修改列表
					this.post.zanState = 1
					this.post.supportNum++
					this.initComment()
					this.commentText=''
					this.commentChoose(0)
					uni.showToast({
						title: '评论成功',
						icon: 'none',
						duration: 2000,
						success() {
						}
					})
				})
			},
			previewImage() {
				uni.previewImage({
					current: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstatic.jisutui.vip%2Fdata%2Fupload%2F2019%2F01%2F69e6594d25grorbs.jpg&refer=http%3A%2F%2Fstatic.jisutui.vip&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645689121&t=0c2c41c954cc31a3d8a99db086bd32fe',
					urls: [
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstatic.jisutui.vip%2Fdata%2Fupload%2F2019%2F01%2F69e6594d25grorbs.jpg&refer=http%3A%2F%2Fstatic.jisutui.vip&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645689121&t=0c2c41c954cc31a3d8a99db086bd32fe'
					]
				})
			}
		},
		components: {
			CustomHeaderBar
		}
	}
</script>

<style lang="scss">
	@import '@/utils/variable.scss';

	.lt-detail-wrapper {
		height: 100%;
		padding-bottom: 100upx;
		padding-top: 160upx;
		box-sizing: border-box;

		.line {
			margin: 16rpx;
			height: 2rpx;
			background-color: #F1F1F1;
		}

		.info-wrapper {
			padding: 24upx;
			background-color: #fff;


			.info {
				display: flex;
				justify-content: space-between;

				.address {
					font-size: 24rpx;
					color: #999999;
				}

				.topic-wrapper {
					height: 56upx;
					line-height: 56upx;
					padding: 0 18upx;
					border-radius: 56upx;
					background-color: $base-bg;
					font-size: 0;

					.image {
						width: 32upx;
						height: 32upx;
						margin-right: 12upx;
						vertical-align: middle;
					}

					.name {
						color: $base-color;
						font-size: 26upx;
						vertical-align: middle;
					}
				}
			}

			.content {
				margin-top: 16rpx;
				font-size: 28rpx;
			}

			.image-list {
				display: flex;
				flex-wrap: wrap;
				margin-right: -24rpx;

				.image-item {
					position: relative;
					margin-top: 24rpx;
					margin-right: 24rpx;
					flex: 0 0 200upx;
					width: 200upx;
					height: 200upx;
					border-radius: 8rpx;
					overflow: hidden;

					.image {
						width: 200upx;
						height: 200upx;
					}
				}
			}

			.tail-wrapper {
				margin-top: 8upx;
				display: flex;
				height: 40upx;
				line-height: 40upx;

				.time {
					font-size: 24upx;
					color: #999999;
				}
			}

			.zan-wrapper {
				padding: 24upx 0;

				.zan {
					margin: 0 auto;
					width: 100upx;
					height: 100upx;
					line-height: 100upx;
					font-size: 0;
					text-align: center;
					border-radius: 50%;
					background-color: $base-bg;

					.image {
						width: 50upx;
						height: 50upx;
						vertical-align: middle;
					}
				}

				.text {
					margin-top: 8upx;
					color: $base-color;
					text-align: center;
					font-size: 24upx;
				}
			}
		}

		.comment-wrapper {
			.title {
				padding: 0 24upx;
				height: 120upx;
				line-height: 120upx;
				font-size: 36upx;
				font-weight: bold;
			}

			.list-wrapper {
				background-color: #ffffff;
				padding: 0 24upx;

				.item-wrapper {
					padding: 16upx 0;
					border-bottom: 1px solid $border-color;

					&:last-child {
						border: none;
					}

					.content {
						font-size: 28rpx;
					}

					.tail-wrapper {
						display: flex;
						margin-top: 8upx;
						height: 60upx;
						line-height: 60upx;
						font-size: 0;

						.image {
							margin-right: 8upx;
							width: 36upx;
							height: 36upx;
							vertical-align: middle;
						}

						.time {
							font-size: 24upx;
							color: #999999;
						}

						.active {
							color: $base-color;
						}

						.text {
							vertical-align: middle;
							font-size: 30upx;
						}

						.empty {
							flex: 1;
						}

						.zan,
						.pinglun {
							margin-left: 36upx;
							font-size: 28upx;
						}
					}

					.sub-comment {
						margin-top: 12upx;
						padding-left: 100upx;

						.inner {
							padding: 0 16upx;
							border-radius: 12upx;
							overflow: hidden;
							background-color: $bg-color;
						}

						.item-wrapper {

							.tail-wrapper {
								height: 60upx;
								line-height: 60upx;

								.image {
									width: 32upx;
									height: 32upx;
								}
							}

						}
					}
				}
			}
		}

		.tail-fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			height: 100upx;
			padding: 0 24upx;
			box-sizing: border-box;

			.input {
				margin-right: 24upx;
				padding: 0 24upx;
				flex: 1;
				height: 100upx;
				background-color: #fff;
				height: 68upx;
				line-height: 68upx;
				margin-top: 16upx;
			}

			.button {
				background-color: $base-bg;
				color: $base-color;
				margin-top: 20upx;
				height: 60upx;
				line-height: 60upx;
				width: 120upx;
				border-radius: 8upx;
				font-size: 26upx;
				text-align: center;
			}
		}
	}
</style>
